<template>
    <button class="com_button" :class="{'com_button_click': isClick}" @click="buttonClick">
      <slot>确认</slot>
    </button>
</template>

<script>
export default {
  name: "comButton",
  data() {
    return {
      isClick: false
    };
  },
  methods: {
    buttonClick() {
      this.isClick = true;
      setTimeout(() => {
        this.isClick = false;
      }, 100);
      this.click();
    }
  },
  props: ["click"]
};
</script>

<style lang="scss">
@import "../assets/scss/common_style";
  .com_button {
    // @include buttonBgChangeStyle();
    transition: all 0.1s;
    color: #ffffff;
    color: rgba(255, 255, 255, 1);
    width: 510px;
    height: 84px;
    font-size: 32px;
    background: rgba(10, 137, 172, 1);
    border-radius: 42px;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    &.com_button_click {
      background: rgba(10, 137, 172, 1);
      color: #ffffff;
      // margin-top: 3px;
      // margin-bottom: -3px;
    }
  }
</style>
